<template>
	<div class="role-list">
		<el-card class="box-card">
			<el-form ref="form" :model="form" inline>
				<el-form-item prop="name" label="角色名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @disabled="loading" @click="onSubmit"
						>查询</el-button
					>
					<el-button @click="reset" @disabled="loading">重置</el-button>
					<el-button type="success" @click="handlerAdd">添加角色</el-button>
				</el-form-item>
			</el-form>
			
			<el-table v-loading="loading" :data="role" style="width: 100%" border>
				<el-table-column type="index" label="编号" min-width="150">
				</el-table-column>
				<el-table-column prop="name" label="角色名称" min-width="180">
				</el-table-column>
				<el-table-column prop="description" label="描述" min-width="180">
				</el-table-column>
				<el-table-column prop="createdTime" label="添加时间" min-width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.createdTime | date }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="180">
					<template slot-scope="scope">
						<el-button
							type="text"
							@click="
								$router.push({
									name: 'alloc-menu',
									params: {
										roleId: scope.row.id,
									},
								})
							"
							>分配权限</el-button>
						<el-button
							type="text"
							@click="
								$router.push({
									name: 'alloc-resource',
									params: {
										roleId: scope.row.id,
									},
								})
							"
							>分配资源</el-button>
						<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-dialog
			:title="isEdit ? '编辑角色' : '添加角色'"
			width="500px"
			:visible.sync="dialogVisible"
		>
			<CreateOrEdit
				v-if="dialogVisible"
				:roleId="roleId"
				:isEdit="isEdit"
				@success="onSuccess"
				@cancel="dialogVisible = false"
			></CreateOrEdit>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Form } from 'element-ui'
import { getRolePages, deleteRole } from '@/services/role'
import CreateOrEdit from './CreateOrEdit.vue'

export default Vue.extend({
  name: 'RoleList',
  components: {
    CreateOrEdit
  },
  data () {
    return {
      form: {
        name: '',
        current: 1,
        size: 50
      },
      loading: false,
      role: [],
      dialogVisible: false,
      roleId: null as number | null,
      isEdit: false
    }
  },
  created () {
    this.loadRoles()
  },
  methods: {
    async loadRoles () {
      this.loading = true
      const { data } = await getRolePages(this.form)
      this.loading = false
      this.role = data.data.records
    },
    reset () {
      (this.$refs.form as Form).resetFields()
      this.loadRoles()
    },
    handleEdit (role: { [key: string]: number }) {
      this.isEdit = true
      this.dialogVisible = true
      this.roleId = role.id
    },
    handleDelete (role: { [key: string]: number }) {
      this.$confirm('是否要删除该资源？', '提示', { type: 'warning' }).then(
        async () => {
          await deleteRole(role.id)
          this.$message.success('删除成功')
          this.loadRoles()
        }
      )
    },
    handlerAdd () {
      this.isEdit = false
      this.dialogVisible = true
    },
    onSubmit () {
      this.loadRoles()
    },
    addRole () {
      console.log('addRole')
    },
    onSuccess () {
      this.dialogVisible = false
      this.loadRoles()
    }
  }
})
</script>

<style lang="scss" scoped></style>
